import React from 'react';
import { Row, Col, Card, Input, Dropdown, Space } from 'antd';
import styles from '../select/Select.less';

const { Meta } = Card;
const { Search } = Input;

/**
 * 顶部主菜单及其内容
 */
class ApplicationSelect extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      tenantId: null,
      tenantName: null,
      applicationList: null
    }
  }

  componentWillReceiveProps(props) {
    let { tenantAppVo } = props;
    if (tenantAppVo) {
      let appList = tenantAppVo?.appList.filter(item => tenantAppVo?.tenantId == item.targetId);
      this.setState({ tenantId: tenantAppVo?.tenantId, tenantName: tenantAppVo?.tenantName, applicationList: appList });
    }
  }

  render() {

    const {
      tenantAppVo, onSearch, onShowSystem
    } = this.props;
    const { tenantId, tenantName, applicationList } = this.state;

    const cardWidth = (window.innerWidth - 140) / 6;

    const onChangeTenant = ({ key }) => {
      let appList = tenantAppVo?.appList.filter(item => key == item.targetId);
      let tenantVo = tenantAppVo?.tenantList?.find(item => key == item.id);
      this.setState({ tenantId: tenantVo.id, tenantName: tenantVo.name, applicationList: appList });
    }

    let tenantItems = tenantAppVo?.tenantList.map(item => ({ key: item.id, label: item.name }));

    return (
      <div style={{ width: "100%", height: "100%", padding: 20 }}>
        <Row>
          <Col span={12}>
            <Search placeholder="请输入应用名称" onSearch={onSearch} enterButton style={{ width: "50%" }} />
          </Col>
          <Col span={12}>
            <div style={{ display: "flex", float: "right" }}>
              <div style={{ margin: "5px 20px 0px 0px" }}>{tenantName}</div>
              <Dropdown menu={{ items: tenantItems, onClick: onChangeTenant }}>
                <Space>
                  <span>切换租户<i className="ri-arrow-down-s-line" style={{fontSize: 20}}/></span>
                </Space>
              </Dropdown>
            </div>
          </Col>
        </Row>
        <Row style={{display: "flex", flexDirection: "row"}}>
          {
            applicationList?.map((item, index) =>
              <Card
                hoverable
                onClick={() => onShowSystem(tenantId, item) }
                style={{ width: cardWidth, height: 235, margin: (index + 1) % 6 == 0 ? "20px 0px 0px 0px" : "20px 20px 0px 0px" }}
                cover={<img width={cardWidth} height={120} src={item.icon} />}
              >
                <Meta title={item.name} description={<div style={{ width: cardWidth }} className={styles.app_text_ellipsis}>{item.describe}</div>} />
              </Card>
            )
          }
        </Row>
      </div>
    )
  };
}

export default ApplicationSelect;
